{% extends 'base.html' %}

{% block content %}
    <section class="content-header">
        <h1>
            Dashboard
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active"><a href="#">dashboard</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>{{ asset_count }}<sub style="font-size: 20px">台</sub></h3>

                        <p>主机资产</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-cloud"></i>
                    </div>
                    <a href="{% url 'assets:asset_list' %}" class="small-box-footer">主机资产列表详情 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>{{ user_count }}<sub style="font-size: 20px">个</sub></h3>

                        <p>用户</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="{% url 'accounts:user_list' %}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>{{ permission_count }}<sub style="font-size: 20px">条</sub></h3>

                        <p>权限配置</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-settings"></i>
                    </div>
                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-light-blue">
                    <div class="inner">
                        <h3>65<sub style="font-size: 20px">个</sub></h3>

                        <p>任务</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-document-text"></i>
                    </div>
                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <!-- DONUT CHART -->
            <div class="col-md-6">
                <!-- DONUT CHART -->
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <i class="fa fa-server"></i>
                        <h3 class="box-title">主机资产信息图</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="sales-chart1" style="height: 250px; position: relative;"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- DONUT CHART -->
            <div class="col-md-6">
                <!-- DONUT CHART -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <i class="fa fa-user"></i>
                        <h3 class="box-title">用户信息图</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="sales-chart2" style="height: 250px; position: relative;"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- DONUT CHART -->
            <div class="col-md-6">
                <!-- DONUT CHART -->
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <i class="fa fa-dashboard"></i>
                        <h3 class="box-title">主机信息图</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="sales-chart3" style="height: 250px; position: relative;"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- ./col -->
        </div>


    </section>
    <!-- /.content -->
{% endblock %}

{% block js %}
    <script src="/static/js/raphael.min.js"></script>
    <script src="/static/js/morris.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#g-1').addClass('active');
            $('#g-1-1').addClass('active');
        });
        $(function () {
            //DONUT CHART
            var donut1 = new Morris.Donut({
                element: 'sales-chart1',
                resize: true,
                colors: ["#00a65a", "#f56954", "#00c0ef"],
                data: [
                    {label: "正常主机", value: '{{ asset_normal_count }}'},
                    {label: "故障主机", value: '{{ asset_measure_count }}'},
                    {label: "其他主机", value: '{{ asset_other_count }}'}
                ],
                hideHover: 'auto'
            });
            var donut2 = new Morris.Donut({
                element: 'sales-chart2',
                resize: true,
                colors: ["#00bbbb", "#f56954"],
                data: [
                    {label: "管理员", value: '{{ user_is_staff_count }}'},
                    {label: "普通用户", value: '{{ user_is_not_staff_count }}'}
                ],
                hideHover: 'auto'
            });
        });

    </script>
{% endblock %}